<template>
	<view>
		
		<view class="uni-list heigth-fill">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-label">工程</view>
				</view>
				<view class="uni-list-cell-right">
					<picker key="projectLists" :range="projectLists" @change="projectChange" :value="projectIndex" mode="selector" range-key="projectName">
						<view class="uni-input" v-if="projectIndex||projectIndex===0">{{projectLists[projectIndex].projectName | textLimitLength(15)  }}</view>
						<view class="uni-input" v-else>&nbsp;</view>
					</picker>
				</view>
			</view>
			
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-label">项目</view>
				</view>
				<view class="uni-list-cell-right">
					<picker key="projectItemLists" :range="projectItemLists" @change="projectItemChange" :value="projectItemIndex" mode="selector" range-key="itemName">
						<view class="uni-input" v-if="projectItemIndex||projectItemIndex===0">{{projectItemLists[projectItemIndex].itemName | textLimitLength(15)  }}</view>
						<view class="uni-input" v-else>&nbsp;</view>
					</picker>
				</view>
			</view>
			
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-label">报销类型</view>
				</view>
				<view class="uni-list-cell-right">
					<picker key="costTypeLists" :range="costTypeLists" @change="costTypeChange" :value="costTypeIndex" mode="selector" range-key="name">
						<view class="uni-input" v-if="costTypeIndex||costTypeIndex===0">{{costTypeLists[costTypeIndex].name | textLimitLength(15)  }}</view>
						<view class="uni-input" v-else>&nbsp;</view>
					</picker>
				</view>
			</view>
			
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-label">费用名称</view>
				</view>
				<view class="uni-list-cell-right">
					<view class="uni-input-wrapper">
						<input class="uni-input" maxlength="50" @input="costNameInput" />
					</view>
				</view>
			</view>
			
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-label">费用描述</view>
				</view>
				<view class="uni-list-cell-right">
					<view class="uni-input-wrapper">
						<input class="uni-input" maxlength="200" @input="costDescInput" />
					</view>
				</view>
			</view>
			
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-label">金额</view>
				</view>
				<view class="uni-list-cell-right">
					<view class="uni-input-wrapper">
					    <input class="uni-input" type="digit" @input="costAmountInput" />
					</view>
				</view>
			</view>
			
			<!-- <view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-label">支付状态</view>
				</view>
				<view class="uni-list-cell-right">
					<view class="uni-input-wrapper">
						<radio-group @change="payStateChange" style="margin: 20rpx;">
							<label class="radio">
								<radio checked :value="0" style="transform:scale(0.7)"/>未支付
							</label>
							<label class="radio">
								<radio :value="1" style="transform:scale(0.7)"/>支付
							</label>
						</radio-group>
					</view>
				</view>
			</view> -->
			
			<!-- 上传图片 -->			
			<view class="uni-list-cell">
				<view class="uni-uploader">
					<view class="uni-uploader-head uni-uploader-head-cell-pd">
						<view class="uni-uploader-title">凭据图片</view>
						<view class="uni-uploader-info">{{costData.images.length}}/9</view>
					</view>
					<view class="uni-uploader-body uni-uploader-body-cell-pd">
						<view class="uni-uploader__files">
							<block v-for="(image,index) in showImage" :key="index">
								<view class="uni-uploader__file">
									<image class="uni-uploader__img" 
										:src="image" 
										:data-src="image" 
										@tap="previewImage"></image>
								</view>
							</block>
							<view class="uni-uploader__input-box" v-if="costData.images.length < 9">
								<view class="uni-uploader__input" @tap="chooseImage"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="uni-list">
			<view class="uni-list-cell">
				<button :disabled="!(costData.images.length > 0 && !imageUpload)" class="button-sp-area" type="primary" plain="true" @click="addCostClick">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getProjectInfo  } from '@/api/projectInfo.js'
	import { getProjectItemInfo } from '@/api/projectItemInfo.js'
	import { getCostTypeInfo } from '@/api/costTypeInfo.js'
	import { addCostApply } from '@/api/projectCostInfo.js'
	import { uploadCostImage } from '@/api/uploadFile.js'
	import permision from "@/common/permission.js"
	import { userCheckInfoImgUrl, userCheckInfoMinImgUrl } from '@/utils/index.js'
	
	export default {
		onLoad() {
			uni.setNavigationBarTitle({
				title: "增加报销 "
			})
			this.getProjectLists();
			this.getCostTypeLists();
		},
		data() {
			return {
				
				projectQuery: {
					page: 1,
					size: 2147483640,
					param: {}
				},
				projectItemQuery: {
					page: 1,
					size: 2147483640,
					param: {
						projectId: undefined
					}
				},
				costTypeQuery:{
					page: 1,
					size: 2147483640,
					param: {}
				},
				projectLists: [],
				projectIndex: undefined,
				projectItemLists: [],
				projectItemIndex: undefined,
				costTypeLists: [],
				costTypeIndex: undefined,
				costData: {
					projectId: undefined,
					itemId: undefined,
					costTypeId: undefined,
					costName: undefined,
					costDesc: undefined,
					costAmount: undefined,
					// payState: 0,
					images: []
				},
				showImage: [],
				imageUpload: false
			}
		},
		methods: {
			// 获取工程信息列表
			getProjectLists() {
				getProjectInfo(this.projectQuery).then(resp => {
					this.projectLists = resp.datas.datas;
					if(this.projectLists[0]) {
						this.projectIndex = 0;
						this.projectItemIndex = undefined;
						this.projectItemQuery.param.projectId = this.projectLists[0].id;
						this.costData.projectId = this.projectLists[0].id;
						this.getProjectItemLists();
					}
					else {
						this.projectItemQuery.param.projectId = undefined;
						this.costData.projectId = undefined;
						this.projectIndex = undefined;
					}
				})
			},
			// 获取项目信息列表
			getProjectItemLists() {
				if(!this.projectItemQuery.param.projectId) {
					return;
				}
				getProjectItemInfo(this.projectItemQuery).then(resp => {
					this.projectItemLists = resp.datas.datas;
					if(this.projectItemLists[0]) {
						this.projectItemIndex = 0;
						this.costData.itemId = this.projectItemLists[0].id;
					}
					else {
						this.projectItemIndex = undefined;
						this.costData.itemId = undefined;
					}
				})
			},
			// 获取报销类型列表
			getCostTypeLists(){
				getCostTypeInfo(this.costTypeQuery).then(resp => {
					this.costTypeLists = resp.datas.datas;
					if(this.costTypeLists[0]) {
						this.costTypeIndex = 0;
						this.costData.costTypeId = this.costTypeLists[0].id;
					}
					else {
						this.costTypeIndex = undefined;
					}
				})
			},
			// 选中工程
			projectChange(e) {
				if(this.projectLists.length === 0) 
				{
					return false;
				}
				this.projectIndex = e.detail.value
				this.projectItemQuery.param.projectId = this.projectLists[this.projectIndex].id;
				this.costData.projectId = this.projectLists[this.projectIndex].id;
				this.getProjectItemLists();
			},
			// 选中项目
			projectItemChange(e) {
				if(this.projectItemLists.length === 0) 
				{
					return false;
				}
				this.projectItemIndex = e.detail.value;
				this.costData.itemId = this.projectItemLists[this.projectItemIndex].id;
			},
			// 选中报销
			costTypeChange(e) {
				if(this.costTypeLists.length === 0) {
					return false;
				}
				this.costTypeIndex = e.detail.value;
				this.costData.costTypeId = this.costTypeLists[this.costTypeIndex].id;
			},
			costNameInput(e) {
				this.costData.costName = e.detail.value
			},
			costDescInput(e) {
				this.costData.costDesc = e.detail.value
			},
			costAmountInput(e) {
				this.costData.costAmount = e.detail.value
			},
			// 支付类型改变
			// payStateChange(e) {
			// 	this.costData.payState = e.detail.value;
			// },
			addCostClick(){
				if(!this.addCostCheck()) {
					return false;
				}
				// 数据校验
				addCostApply(this.costData).then(resp => {
					uni.showToast({
						title: "增加成功",
						icon: 'none',
						duration: 1000
					});
					uni.switchTab({
						url: "/pages/costInfo/cost-lists"
					})
				})
				.catch(error => {
					uni.showToast({
						icon:"none",
						title: error,
						duration: 1500
					})
				})
			},
			addCostCheck(){
				if(!this.costData.projectId || this.costData.projectId === 0) {
					uni.showToast({
						title: "请选择工程",
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				if(!this.costData.itemId || this.costData.itemId === 0) {
					uni.showToast({
						title: "请选择项目",
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				if(!this.costData.costTypeId || this.costData.costTypeId === 0) {
					uni.showToast({
						title: "请选择报销类型",
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				if(!this.costData.costName || this.costData.costName === "") {
					uni.showToast({
						title: "请填写费用名称",
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				if(!this.costData.costAmount || this.costData.costAmount <= 0) {
					uni.showToast({
						title: "请填写报销金额",
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				if(this.costData.costAmount > 999999.99) {
					uni.showToast({
						title: "报销金额最大值为999999.99",
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				if(this.costData.images.length <= 0) {
					uni.showToast({
						title: "请上传报销图片",
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				return true;
			},
			
			// 图片上传相关
			chooseImage: async function(type) {
				if(this.imageUpload) {
					return;
				}
				
				// 判断是否有相关的权限
				let status = await this.checkPermission();
				if (status !== 1) {
					return;
				}
				
				uni.chooseImage({
					sourceType: ['album'],
					sizeType: ['original'],
					count: 9 - this.costData.images.length,
					success: (res) => {
						new Promise(async(resolve, reject) => {
							uni.showToast({
								title: "图片上传中",
								duration: 2147483647,
								icon: "loading"
							});
							this.imageUpload = true;
							
							for(var i = 0; i < res.tempFilePaths.length; i++) {
								var image = res.tempFilePaths[i];
								await uploadCostImage(image).then(resp => {
									this.costData.images.push(resp.datas)
									this.showImage.push(image)
								})
								.catch(error => {
									console.log(error);
								});
								await this.$sleep(600) 
							}
							return resolve();
						})
						.then(() => {
							uni.hideToast();
							this.imageUpload = false;
						})
						.catch(error => {
							uni.showToast({
								title: "图片上传失败，" + error,
								duration: 2000,
								icon: "none"
							});
							uni.hideToast();
							this.imageUpload = false;
						});
					}
				})
			},
			
			// 图片全屏查看
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.showImage
				})
			},
			
			// 检查设备权限
			async checkPermission() {
				let status = permision.isIOS 
					? await permision.requestIOS('album') 
					: await permision.requestAndroid('android.permission.READ_EXTERNAL_STORAGE');
			
				if (status === null || status === 1) {
					status = 1;
				} else {
					uni.showModal({
						content: "没有开启权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			}
		}
	}
</script>

<style>
	button {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.background-white {
		background-color: #FFFFFF;
		background: #FFFFFF;
	}
	.button-sp-area {
		margin: 20rpx auto;
		width: 80%;
	}

	.mini-btn {
		margin-right: 10rpx;
	}
	.uni-uploader-head-cell-pd {
		margin: 22rpx 50rpx;
	}
	.uni-uploader-body-cell-pd {
		margin: 0 20rpx;
	}
	.submit-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.heigth-fill {
		height: 100%;
	}
</style>
